<template>
  <view class="template-ucharts tn-safe-area-inset-bottom">
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed alpha customBack>
      <view slot="back" class='tn-custom-nav-bar__back'
            @click="goBack">
        <text class='icon tn-icon-left'></text>
        <text class='icon tn-icon-home-capsule-fill'></text>
      </view>
      <view class="tn-flex tn-flex-col-center tn-flex-row-center ">
        <text class="tn-text-bold tn-text-xl tn-color-black">交易情况</text>
      </view>
    </tn-nav-bar>

    <view class="" :style="{paddingTop: vuex_custom_bar_height + 10 +  'px'}">

      <view class="">
        <view class="tn-flex tn-flex-row-between tn-flex-col-center">
          <view class="justify-content-item tn-margin tn-text-bold tn-text-lg">
            业务数据
          </view>
          <view class="justify-content-item tn-margin-right tn-padding-xs tn-text-sm tn-bg-gray--light tn-radius tn-color-gray--dark" @click="timeShow = true">
            <text class="tn-padding-left-xs tn-padding-right-xs">{{currentTime}}</text>
            <text class="tn-icon-down tn-padding-right-xs"></text>
          </view>
        </view>

        <view class="tn-flex tn-flex-wrap" style="margin: 15rpx;">
          <view v-for="(item, index) in tuniaoData" :key="index" style="width: 50%;" @click="tn(item.path)">
            <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-bg-gray--light" style="margin: 15rpx;padding: 30rpx 20rpx;border-radius: 15rpx;">
              <view class="justify-content-item ">
                <view class="tn-flex tn-flex-col-center tn-flex-row-left">
                  <view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-color-white" :style="'background-color:'+ item.color +';'">
                    <view :class="[`tn-icon-${item.icon}`]"></view>
                  </view>
                  <view class="">
                    <view class="tn-padding-right tn-padding-left-sm">
                      <text style="font-size: 42rpx;">{{ item.title }}</text>
<!--                      <text class="tn-text-sm tn-padding-left-xs" style="opacity: 0.7;">万</text>-->
                    </view>
                    <view class="tn-padding-right tn-padding-top-xs tn-text-sm tn-padding-left-sm tn-text-ellipsis tn-color-gray">

                      <text class="tn-padding-right-xs">{{item.tip}}</text>
<!--                      <text :style="'color:'+ item.updown +';'">{{ item.number }}</text>-->
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="tn-padding-bottom-xl">
        <view class="tn-flex tn-flex-row-between tn-flex-col-center">
          <view class="justify-content-item tn-margin tn-text-bold tn-text-lg">
            佣金数据
          </view>
          <view class="justify-content-item tn-margin-right tn-padding-xs">
            <tn-button :plain="true" shadow :border="false" @click="tn('/minepages/ranking')">排行榜</tn-button>
          </view>
        </view>
        <view class="tn-padding-right-xs tn-padding-right" style="margin-left: 30rpx">总佣金：{{tuniaoData[0].title}}</view>
        <view class="" style="min-height: 500rpx; margin-top: -20rpx">
<!--          <qiun-data-charts type="ring" :opts="makeupOpts" :chartData="makeupChartData" />-->
        </view>
      </view>
    </view>
    <tn-select v-model="timeShow" mode="single" :searchShow="false" :list="timeList" @confirm="handTimeConfirm" :zIndex="99999999999"></tn-select>
  </view>
</template>

<script>
// import QiunDataCharts from "../uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";
import TnNavBar from "../tuniao-ui/components/tn-nav-bar/tn-nav-bar.vue";
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
import TnButton from "../tuniao-ui/components/tn-button/tn-button.vue";
import TnSelect from "../tuniao-ui/components/tn-select/tn-select.vue";
import {getReportDataApi} from "../api/report";
export default {
  components: {TnSelect, TnButton, TnNavBar},
  mixins: [template_page_mixin],
  data() {
    return {
      tuniaoData: [
        {
          title: '',
          icon: 'cube-fill',
          color: '#FB6A67',
          number: '+21%',
          updown: '#00D05E',
          tip: "总佣金"
        },
        {
          title: '',
          icon: 'cube-fill',
          color: '#FFAC00',
          number: '+18%',
          updown: '#00D05E',
          tip: "已提现",
          path: "/minepages/embodiment"
        },
        {
          title: '',
          icon: 'cube-fill',
          color: '#957BFE',
          number: '-12%',
          updown: '#FB6A67',
          tip: "邀请人数",
          path: "/minepages/invited"
        },
        {
          title: '',
          icon: 'cube-fill',
          color: '#4B98FE',
          number: '+16%',
          updown: '#00D05E',
          tip: "交易单量",
          path:"/minepages/orderVolume"
        }
      ],
      timeShow: false,
      currentTime: "近一年",
      timeList: [
        {
          value: 'year',
          label: '近一年'
        },
        {
          value: 'month',
          label: '近一月',
        },
        {
          value: 'week',
          label: '近一周'
        }
      ],
      // 营收占比
      makeupChartData: {},
      makeupOpts: {
        rotate: false,
        rotateLock: false,
        color: ["#4B98FE","#00D05E","#FFAC00","#FB6A67","#957BFE","#00B9FE","#FE871B","#00C8B0","#F674D6"],
        padding: [15,10,15,10],
        dataLabel: true,
        enableScroll: false,
        legend: {
          show: true,
          position: "left",
          lineHeight: 32
        },
        title: {
          name: "",
          fontSize: 15,
          color: "#666666"
        },
        subtitle: {
          name: "",
          fontSize: 25,
          color: "#4B98FE"
        },
        extra: {
          ring: {
            ringWidth: 30,
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 0,
            labelWidth: 15,
            border: true,
            borderWidth: 2,
            borderColor: "#FFFFFF",
            // linearType: "custom"
          }
        }
      },
    };
  },
  onShow() {
  },
  onLoad() {
    this.drawMakeupCharts();  //营收占比
  },
  mounted() {

  },
  methods: {
    // 营收占比 绘制
    async drawMakeupCharts() {
      const find = this.timeList.find(item => {
        return item.label === this.currentTime;
      })
      const res = await getReportDataApi(find.value);
      console.log(res)
      this.tuniaoData[0].title = res?.data?.totalAmount || 0
      this.tuniaoData[1].title = res?.data?.totalWithdrawnAmount || 0
      this.tuniaoData[2].title = res?.data?.totalCustomerQuantity || 0
      this.tuniaoData[3].title = res?.data?.totalOrderQuantity || 0
      // let res = {
      //   series: [
      //     {
      //       data: [{"name":"前端","value":5000},{"name":"设计","value":3000},{"name":"赞赏","value":2000},{"name":"原型","value":1800},{"name":"运维","value":900}]
      //     }
      //   ]
      // };
      const totalFrozenAmount = res?.data?.totalFrozenAmount || 0
      const totalNotWithdrawAmount = res?.data?.totalNotWithdrawAmount || 0
      const totalWithdrawnAmount = res?.data?.totalWithdrawnAmount || 0
      const data = {
        series: [
          {
            data: [
              { "name": "冻结金额", "value": totalFrozenAmount, "labelText": `${totalFrozenAmount}元` },
              { "name": "待提现", "value": totalNotWithdrawAmount, "labelText": `${totalNotWithdrawAmount}元` },
              { "name": "已提现", "value": totalWithdrawnAmount, "labelText": `${totalWithdrawnAmount}元` }
            ]
          }
        ]
      }
      this.makeupChartData = JSON.parse(JSON.stringify(data));
    },
    /**
     * 选择时间事件
     * @param e
     */
    handTimeConfirm(e) {
      this.currentTime = e[0].label;
      this.drawMakeupCharts();  //营收占比
    },
    tn(e) {
      uni.navigateTo({
        url: e,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
/* 胶囊*/
.tn-custom-nav-bar__back {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 1000rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.5);
  color: #FFFFFF;
  font-size: 18px;

  .icon {
    display: block;
    flex: 1;
    margin: auto;
    text-align: center;
  }

  &:before {
    content: " ";
    width: 1rpx;
    height: 110%;
    position: absolute;
    top: 22.5%;
    left: 0;
    right: 0;
    margin: auto;
    transform: scale(0.5);
    transform-origin: 0 0;
    pointer-events: none;
    box-sizing: border-box;
    opacity: 0.7;
    background-color: #FFFFFF;
  }
}


/* 间隔线 start*/
.tn-strip-bottom {
  width: 100%;
  border-bottom: 20rpx solid #F8F7F8;
}

/* 间隔线小 start*/
.tn-strip-bottom-min {
  width: 100%;
  border-bottom: 1rpx solid #F8F7F8;
}

/* 业务数据 start */
.icon12 {
  &__item {
    transform: scale(1);
    transition: transform 0.3s linear;
    transform-origin: center center;

    &--icon {
      width: 90rpx;
      height: 90rpx;
      font-size: 50rpx;
      border-radius: 50%;
      position: relative;
      z-index: 1;

      &::after {
        content: " ";
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
        bottom: 0;
        border-radius: inherit;
        opacity: 1;
        transform: scale(1, 1);
        background-size: 100% 100%;
        // background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg2.png);


      }
    }
  }
}

</style>